<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport"-->
          <!--content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
    <title></title>
    <style>
        html {
            height: 100%;
            overflow: hidden;
        }

        body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map-box {
            position: absolute;
            top: 2rem;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #map-div {
            height: 100%;
            position: relative;
            cursor: move;
            transition: transform 200ms ease-in-out 0s;
            transform: matrix(1, 0, 0, 1, 0, 0);
        }

        #map-img {
            position: relative;
            transform-origin: left top;
            -webkit-transform-origin: left top;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -webkit-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -moz-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -ms-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
            -o-transform: translate3d(0, 0, 0) scale(0.25, 0.25);
        }

        .car-font {
            color: #FFFFFF;
            text-align: center;
            padding: 0;
            margin: 0;
            position: absolute;
            -webkit-transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            transform: translate3d(0, -5%, 0) scale(0.1, 0.1);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            overflow: hidden;
        }

        #zoom-box {
            position: absolute;
            height: 5%;
            width: 50%;
            right: 5%;
            bottom: 5%;
        }

        #map-note {
            position: absolute;
            bottom: 5%;
            left: 4%;
            height: 110px;
            width: 95px;
            overflow: hidden;
            background: #ffffff;
            padding: 4px 0;
            border-radius: 6px;
            box-shadow: 0px 0px 2px 1px #bfbfbf;
        }

        #map-note p {
            text-align: center;
            color: #595959;
            font-size: 14px;
            margin-top: 11px;
            margin-bottom: 0;
        }

        #map-note p i {
            font-style: normal;
            display: inline-block;
            width: 22px;
            height: 22px;
            color: #ffffff;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
            border-radius: 11px;
            margin-right: 7px;
        }
    </style>
</head>
<body>
<div>测试</div>
<div id="map-box">
    <!--地图-->
    <div id="map-div" class="panzoom">
        <!--地图图片-->
        <img id="map-img" src="map/map-2.png" trueImg="map/map.png" alt="map"/>
        <!--车位-->
        <div class="car-font" style="top:3931px;left:170px;background-color:#38C457;">售</div>
        <div class="car-font" style="top:3897px;left:283px;background-color:#FABA50;">订</div>
        <div class="car-font" style="top:3853px;left:416px;background-color:#EF5350;">售</div>
    </div>
    <!--说明-->
    <div id="map-note">
        <p><i class="keshou" style="background-color:#38C457;">售</i>可购买</p>
        <p><i class="yiding" style="background-color:#FABA50;">订</i>已预订</p>
        <p><i class="yikshou" style="background-color:#EF5350;">售</i>已售出</p>
    </div>
    <!--缩放-->
    <div id="zoom-box">
        <div class="buttons">
            <button class="zoom-in">放大</button>
            <button class="zoom-out">缩小</button>
            <input type="range" class="zoom-range">
            <button class="reset">Reset</button>
        </div>
    </div>
</div>
<script src="vender/jquery-3.4.1/jquery.dup.js"></script>
<script src="vender/panzoom/jquery.panzoom.dup.js"></script>
<script>
    //样式初始化
    function lazyLoad() {
        var oDiv = document.getElementById("map-div");
        var imgEle = oDiv.firstElementChild;
        var imgSrc = imgEle.getAttribute("trueImg");

        var oImg = new Image();
        oImg.src = imgSrc;
        oImg.onload = function () {
            imgEle.src = this.src;
        };
        oImg = null;
    }
    setTimeout(lazyLoad, 5000);

    var winWidth;
    function cssStart() {
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        }
        else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        } else {
            winWidth = 400;
        }
        $('#map-div').width(winWidth);
        $('#map-img').width(winWidth * 4);
    }
    cssStart();
    //初始化缩放插件
    $('.panzoom').panzoom({
        contain: 'invert',
        maxScale: 10,
        minScale: 1,
        increment: 1,
        startTransform: 'scale(1)',
        $zoomIn: $(".zoom-in"),
        $zoomOut: $(".zoom-out"),
        $zoomRange: $(".zoom-range"),
        $reset: $(".reset")
    });
    //定位车位字体设置
    function fontStart() {
        var mapImg = $('#map-img');
//        var scale = winWidth / mapImg.get(0).naturalWidth;
        var scale = winWidth / 11024;
        var width = 100 * scale * 10;
        var carFont = $('.car-font');

        for (var i = 0; i < carFont.length; i++) {
            var parkTop = parseFloat(carFont.eq(i).get(0).style.top);
            var parkLeft = parseFloat(carFont.eq(i).get(0).style.left);
            console.log(parkLeft * scale);
            carFont.eq(i).css({
                'width': width + 'px',
                'border-radius': width / 2 + 'px',
                'line-height': width + 'px',
                'font-size': width / 2 + 'px',
                'top': parkTop * scale + 'px',
                'left': parkLeft * scale + 'px'
            });
        }
    };
    fontStart();
    //禁止微信下拉露底和回弹
    $('#map-box').on('touchmove', function (event) {
        event.preventDefault();
    });
</script>
</body>
</html>